<template>
  <div>
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      @cancel="onCancel"
      show-action
    />
    <van-list>
      <!-- 数据使用vue的计算属性进行过滤搜索  -->
      <van-cell v-for="cinema in computedDataList" :key="cinema.cinemaId">
        <div>{{ cinema.name }}</div>
        <div class="address">{{ cinema.address }}</div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { Search } from "vant";
import Vue from "vue";
import { mapState, mapActions } from "vuex";
Vue.use(Search);
export default {
  data() {
    return {
      value: "",
    };
  },
  mounted() {
    // console.log(this.$store.state.cinemaList.length);
    if (this.cinemaList.length === 0) {
      // 避免刷新之后获取不到城市的影院数据
      this.getCinemaData(this.cityId);
    }
    // setTimeout(() => {
    //   console.log(this.cinemaList);
    // }, 1000);
    // console.log(this.$store.state.cinemaList);
  },
  methods: {
    ...mapActions("cinemaModule", ["getCinemaData"]),
    onCancel() {
      this.$router.back();
    },
  },
  computed: {
    ...mapState("cinemaModule", ["cinemaList"]),
    ...mapState("cityModule", ["cityId"]),
    computedDataList() {
      //如果用户没有输入要搜索的内容，不需要过滤数据
      if (this.value === "") return this.cinemaList;
      return this.cinemaList.filter((item) => {
        return (
          item.name.toUpperCase().includes(this.value.toUpperCase()) ||
          item.address.toUpperCase().includes(this.value.toUpperCase())
        );
      });
    },
  },
};
</script>